<template>
  <el-form>
    <el-form-item label="正面">
      <!-- <el-upload
        ref="uploadRef1"
        v-model:file-list="img1FileList"
        list-type="picture-card"
        :show-file-list="false"
        :limit="1"
        :on-exceed="handleExceed"
        :http-request="(event) => handleRequest(event)"
      >
        <template #default>
          <div v-if="img1FileList.length" class="pic-box">
            <img :src="(img1FileList[0] as any).url" alt="" />
          </div>
          <el-button v-else>选择</el-button>
        </template>
      </el-upload> -->

      <upload-id-card v-model:file-list="img1FileList" />
    </el-form-item>

    <el-form-item label="反面">
      <upload-id-card v-model:file-list="img2FileList" />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="handleSave">保存</el-button>
    </el-form-item>
  </el-form>

  <base-test v-model="msg" />
</template>

<script lang="ts" setup>
import UploadIdCard from '@/components/upload-id-card/index.vue'
import BaseTest from '@/components/base-test/index.vue'
import type { UploadUserFile } from 'element-plus'
import { ref } from 'vue'

const msg = ref('我的天')
const img1FileList = ref<UploadUserFile[]>([])
const img2FileList = ref<UploadUserFile[]>([])

// 保存
function handleSave() {
  if (img1FileList.value[0].status === 'success' && img2FileList.value[0].status === 'success') {
    // 两个文件都上传成功了

    // 组装保存接口需要的参数
    const params = {
      img1: (img1FileList.value[0].response as any).data,
      img2: (img2FileList.value[0].response as any).data
    }

    console.log(params)
  } else {
    // 不成功
    alert('正在上传中...')
  }
}
</script>

<style lang="scss" scoped>
.pic-box {
  width: 100%;
  height: 100%;
  overflow: hidden;

  img {
    width: 100%;
    display: block;
  }
}
</style>
